<script setup lang="ts">
import {onMounted, ref} from "vue";
import {DevSelectMutex, devUseExtractSelected} from "devecoui-plus";

const options = ref([
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  },
  {
    label: '选项3',
    value: '3'
  },
  {
    label: '选项4',
    value: '4'
  },
  {
    label: '选项5',
    value: '5'
  }
])

const list = ref([
  {
    label: '选项1',
    value: ''
  },
  {
    label: '选项2',
    value: ''
  },
  {
    label: '选项3',
    value: ''
  },
  {
    label: '选项4',
    value: ''
  },
  {
    label: '选项5',
    value: ''
  }
])

/**
 * 清空数组并替换为新数据
 * @param arr - 需要更新的数组
 * @param newData - 新的数据
 */
function replaceArrayData<T>(arr: T[], newData: T[]): void {
  // 清空原数组（移除所有元素）
  arr.splice(0, arr.length);

  // 将新的数据逐个推入原数组
  arr.push(...newData);
}

const allSelectValue = devUseExtractSelected(list.value, 'value', false);
onMounted(() => {
  // 模拟接口赋值
  setTimeout(() => {
    replaceArrayData(list.value, [
      {
        label: '选项1',
        value: '1'
      },
      {
        label: '选项2',
        value: ''
      },
      {
        label: '选项3',
        value: ''
      },
      {
        label: '选项4',
        value: ''
      },
      {
        label: '选项5',
        value: ''
      }
    ])
  }, 2000)
})
</script>

<template>
  <div v-for="(item,index) in list" :key="index">
    <p>选项{{ index + 1 }}：{{ item.value }}</p>
    <dev-select-mutex :all-select-value="allSelectValue" :options="options" v-model="item.value">
    </dev-select-mutex>
  </div>
</template>
